import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import { Icon } from 'antd';
import styles from './index.less';

// 部门-人员包装器
const Box = ({
    className,
    level,
    children,
    hasParent,
    hasChildren,
    collapsed,
    handleClick,
    ...rest
}) => {
    const bottomLine = React.useRef(null);
    React.useLayoutEffect(() => {
        console.info('ccccc', bottomLine.current);
    }, []);
    return (
        <div className={cn('boxWrap', className, styles.box)} {...rest}>
            {hasParent && <div ref={bottomLine} className={styles.topLine} />}
            {children}
            {hasChildren && (
                <div className={cn('bottomLine', styles.bottomLine)} />
            )}
            <div className={styles.btn}>
                {hasChildren && (
                    <Icon
                        className="expandedBtn"
                        onClick={handleClick}
                        title="展开"
                        type="plus-circle"
                        theme="twoTone"
                        twoToneColor="#52c41a"
                    />
                )}
                {hasChildren && (
                    <Icon
                        className="collapsedBtn"
                        onClick={handleClick}
                        title="收起"
                        type="minus-circle"
                        theme="twoTone"
                        twoToneColor="#52c41a"
                    />
                )}
            </div>
        </div>
    );
};

Box.propTypes = {
    // 是否有父节点
    hasParent: PropTypes.bool,
    // 是否有子节点
    hasChildren: PropTypes.bool,
    // 子节点是否收起
    collapsed: PropTypes.bool,
    // 处理收起/展开按钮点击
    handleClick: PropTypes.func
};
Box.defaultProps = {
    hasParent: false,
    hasChildren: false,
    collapsed: true,
    handleClick: () => {}
};

export default Box;
